<template>
  <div style="background-color: #f5f5f5;" >
    <div v-if="this.$route.query.renwuid||this.$route.query.renwuidyx" class="t_top_nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/callsystem/newcalls/waihuzhongxin' }">
        <i class="el-icon-arrow-left"></i>
        外呼任务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/callsystem/newcalls/waihuzhongxin/bodajilu'}">
        拨打记录</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color:#2974FF;">外呼拨打</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-else class="t_top_nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/callsystem/newcalls/waihuzhongxin' }">
        <i class="el-icon-arrow-left"></i>
        外呼任务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/callsystem/newcalls/waihuzhongxin/waihuorder?id='+this.$route.query.id+'&title='+this.$route.query.title+'&called_num='+this.$route.query.called_num+'&total_num='+this.$route.query.total_num+'&type='+this.$route.query.type }">
        订单外呼</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color:#2974FF;">外呼拨打</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="t_my_top" >
      <div style="font-size: 20px;color: #333333;">外呼拨打</div>
      <div style="display: flex;">
        <div class="t_call_order" v-if="this.$route.query.id">
          <el-tooltip class="item" effect="dark" content="按照订单创建时间正序倒序分配任务" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <div style="margin-left: 5px;">拨打顺序设置：</div>
          <el-dropdown @command="handleCommand2">
            <span class="el-dropdown-link" style="cursor: pointer;">

              <span v-if="infoobj.order_type==1">倒序拨打</span>
              <span v-if="infoobj.order_type==0">正序拨打</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">正序拨打</el-dropdown-item>
              <el-dropdown-item command="b">倒序拨打</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div style=" margin-right: 50px; color: rgb(6, 175, 0);" v-if="shoujishebie">手机设备已连接</div>
        <div style=" margin-right: 50px; color: rgb(97, 97, 97);" v-if="!shoujishebie">手机设备未连接</div>
        <div style=" margin-right: 50px; color: rgb(6, 175, 0);" v-if="dianxinshebie">电信云中继（专线）已连接</div>
        <div style=" margin-right: 50px; color: rgb(97, 97, 97);" v-if="!dianxinshebie">电信云中继（专线）未连接</div>
        工号当前：{{shebei.user}}
      </div>
    </div>
    <div class="t_call_center">
      <div class="t_call_center_left">
        <div class="t_call_con">
          <div class="t_wh_top_left">
            <div style="display: flex;margin-bottom: 24px;">
              <div class="t_wh_head"><img src="../../../../static/img/whhead.png" alt=""></div>
              <div class="t_info_box">
                <!-- <div class="t_top_name_box" v-if="this.$route.query.type!=3">
                  <span class="t_name">{{ infoobj.address_name }}</span> <span class="t_lh_font">拉黑</span>
                  <el-switch
                    @change="changeblack"
                    style="margin-left: 6px;margin-right: 10px;"
                    :active-value="1"
                    :inactive-value="0"
                    v-model="isblack"
                    active-color="#F1F8FF">
                  </el-switch>
                  <el-tooltip  effect="dark" content="订单拉黑后不会出现在任何任务中，包含导入创建" placement="right">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div> -->
                <div class="t_top_name_box" >
                  <span class="t_name">{{ infoobj.address_name }}</span>
                  <span v-if="fkname.length" v-for="(item,index) in fkname" :key="index" style="background-color: #000000;color: white;font-size:12px;padding: 3px;border-radius: 4px;align-self:flex-start;margin-right: 10px;">{{ item }}</span>
                </div>
                <div class="t_head_info">
                  <div>{{ infoobj.id_card_num }}</div>
                  <div class="t_shu_line"></div>
                  <div>{{ infoobj.id_card_name }}</div>
                  <div class="t_shu_line"></div>
                  <div>{{infoobj.age}}周岁</div>
                  <div class="t_shu_line"></div>
                  <div>{{ infoobj.address }}</div>
                </div>
                <div class="t_head_info">
                  <div>物流公司：{{ infoobj.tracking_company }}</div>
                  <div class="t_shu_line"></div>
                  <div>物流单号：<span @click="opengj" style="color: #18A0FB;cursor: pointer;">{{ infoobj.tracking_number }}</span></div>
                </div>
              </div>
            </div>
            <div class="t_wh_top_right">
              <el-button v-if="this.$route.query.type!=3" type="danger" @click="xiugaishangpin()" round plain>修改商品</el-button>
              <el-button v-if="infoobj.is_fans_task" type="danger" @click="addfriend" round plain>添加好友</el-button>
              <el-button v-if="infoobj.create_order" type="danger" round plain @click="chuangjiandingdan()">创建订单</el-button>
              <el-button @click="faduanxin()" v-if="infoobj.is_sms&&weifasong" type="danger" round style="background-color: #2974FF;" >发送短信</el-button>
              <div v-if="!weifasong" style="  color: #06af00;margin-top: 9px;margin-left: 10px;">短信发送成功</div>
            </div>
          </div>

          <!-- 联系电话 -->
          <div v-if="infoobj.address_mobile" class="t_msginfo_box">
            <div>联系电话：</div>
            <div style="color: #FB3535;margin-right: 60px;">{{ infoobj.address_mobile }}</div>
            <callbtn  @called="called"
            @closecall="closecall" :dianxinshebie="dianxinshebie" :shoujishebie="shoujishebie" :number="infoobj.address_mobile" :task_order_id="noworderid" :nowcall="nowcall" :ws="ws" :hujiaozhuangtai="hujiaozhuangtai" :choosefkobj="choosefkobj" />
          </div>
          <!-- 生产号码 -->
          <div v-if="infoobj.plan_mobile_produced" class="t_msginfo_box" style="margin-bottom: 10px;">
            <div>生产号码：</div>
            <div style="color: #FB3535;margin-right: 60px;">{{ infoobj.plan_mobile_produced }}</div>
            <callbtn  @called="called"
            @closecall='closecall' :dianxinshebie="dianxinshebie" :shoujishebie="shoujishebie" :number="infoobj.plan_mobile_produced" :task_order_id="noworderid" :nowcall="nowcall" :ws="ws" :hujiaozhuangtai="hujiaozhuangtai" :choosefkobj="choosefkobj" />
          </div>
          <!-- 话术要求 -->
          <div class="t_msginfo_box" style="margin-bottom: 30px;">
            <div>话术要求：</div>
            <!-- v-html="infoobj.demand" -->
            <div class="t_hs_msg" :class="{t_one_col:openhs==1}" v-html="infoobj.demand" ></div>
            <el-button v-if="openhs==1" @click="allhs" type="text" style="padding: 0;margin-left: 10px;">查看全部</el-button>
            <el-button v-else @click="allhs" type="text" style="padding: 0;margin-left: 10px;">收起</el-button>
          </div>
          <!-- 备注1 -->
          <div v-if="infoobj.memo1" class="t_msginfo_box" style="margin-bottom: 30px;">
            <div>备注1：</div>
            <div class="t_hs_msg"  v-html="infoobj.memo1" ></div>
          </div>
          <!-- 备注2 -->
          <div v-if="infoobj.memo2" class="t_msginfo_box" style="margin-bottom: 30px;">
            <div>备注2：</div>
            <div class="t_hs_msg"  v-html="infoobj.memo2" ></div>
          </div>
          <!-- 备注3 -->
          <div v-if="infoobj.memo3" class="t_msginfo_box" style="margin-bottom: 30px;">
            <div>备注3：</div>
            <div class="t_hs_msg"  v-html="infoobj.memo3" ></div>
          </div>
          <!-- 订单ID -->
          <div v-if="this.$route.query.type!=3" class="t_msginfo_box" style="margin-bottom: 10px;">
            <div>订单ID：{{ infoobj.order_id }}</div>
          </div>
          <div v-if="this.$route.query.type!=3" class="t_order_box" >
            <div @click="openzhuan" class="t_zhuan" v-if="infoobj.is_transfer">转</div>
            <div class="t_order_box_in" :class="{t_one_col:openallorder==1}">
              <div class="t_order_item">
                <div class="t_order_title">订单来源：</div>
                <div class="t_order_info">{{ infoobj.source }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">外部订单编号：</div>
                <div class="t_order_info">{{ infoobj.source_id }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">订单创建时间：</div>
                <div class="t_order_info">{{ infoobj.created_at }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">订单状态：</div>
                <div class="t_order_info">{{ infoobj.status }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">退款状态：</div>
                <div class="t_order_info">{{ infoobj.refund_status }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">激活状态：</div>
                <div class="t_order_info">{{ infoobj.active_status }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">商品名称：</div>
                <div class="t_order_info">{{ infoobj.product_sku }}</div>
              </div>
              <div class="t_order_item">
                <div class="t_order_title">商品编码：</div>
                <div class="t_order_info">{{ infoobj.source_sku }}</div>
              </div>
              <div class="t_order_item" style="width: 100%;margin-bottom: 0;">
                <div class="t_order_title">失败原因：</div>
                <!-- v-html="infoobj.reason" -->
                <div class="t_order_info" style="max-width: 84%;overflow-x: auto;" :class="{t_one_col:openfail==1}" v-html="infoobj.reason" ></div>
                <el-button v-if="openfail==1" @click="allfail" type="text" style="padding: 0;margin-left: 10px;">查看全部</el-button>
                <el-button v-else @click="allfail" type="text" style="padding: 0;margin-left: 10px;">收起</el-button>
              </div>
            </div>
            <div style="text-align: center;width: 100%;">
              <el-button v-if="openallorder==1" @click="allorder" type="text" >
                展开更多信息
                <i class="el-icon-arrow-down"></i>
              </el-button>
              <el-button v-else @click="allorder" type="text" >收起</el-button>
            </div>

          </div>
        </div>
        <!-- 设置意向标签 -->
        <div style="background-color: white;" >
          <div class="t_call_tag_title">
            外呼结果
          </div>
          <div  class="t_call_bottom_box">
            <div class="t_call_all_tag_box">
              <div>风控标签：</div>
              <div >
                <el-button plain v-for="(item,index) in fktypelist" :key="index" :type=" item.check ? 'danger' : 'info'" @click="changefk(item)" style="margin-bottom: 10px;" >{{item.risk_type}}</el-button>
              </div>
            </div>
            <div class="t_call_all_tag_box">
              <div>意向标签：</div>
              <div style="width: calc(100% - 180px);">
                <el-button plain v-for="(item,index) in tagList" :key="index" :type=" item.checked ? 'danger' : 'info'" @click="wantswitch(item)" style="margin-bottom: 10px;" >{{item.name}}</el-button>
              </div>
              <rwtype :buttontype="2" @changerwtype="changerwtype" />
            </div>
            <div v-if="this.$route.query.type!=3" class="t_msginfo_box" style="margin-bottom: 25px;">
              <div>修改旗帜：</div>
              <div style="display: flex;justify-content: space-between;width: calc(100% - 100px);">
                <el-radio-group v-model="flagradio" style="display: flex;">
                  <div v-for="item in flaglist" :key="item.id">
                    <el-radio :label="item.type">
                      <span :style="{color:item.color,fontSize:'30px',marginRight:'20px'}" class="iconfont icon-flag-fill"></span>
                    </el-radio>
                  </div>
                </el-radio-group>
                <el-dropdown v-if="this.$route.query.orderid||this.$route.query.tab" trigger="click" @command="handleCommand($event)">
                  <span class="el-dropdown-link">
                    <el-button type="info" size="small" round v-if="infoobj.call_status == 1">未联系</el-button>
                    <el-button type="warning" size="small" round v-if="infoobj.call_status == 2">未接通</el-button>
                    <el-button type="success" size="small" round v-if="infoobj.call_status == 3">已同意</el-button>
                    <el-button type="danger" size="small" round v-if="infoobj.call_status == 4">不同意</el-button>
                    <el-button type="danger" class="d55" size="small" round v-if="infoobj.call_status == 5">后续跟进</el-button>
                    <el-button type="danger" class="d66" size="small" round v-if="infoobj.call_status == 6">有资源再联系</el-button>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item command="1">
                      <el-button type="info" size="small" style="margin: 10px 0;" round>未联系</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item command="2">
                      <el-button type="warning" size="small" style="margin: 10px 0;" round>未接通</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item command="3">
                      <el-button type="success" size="small" style="margin: 10px 0;" round>已同意</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item command="4">
                      <el-button type="danger" size="small" style="margin: 10px 0;" round>不同意</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item command="5">
                      <el-button type="danger" size="small" class="d55" style="margin: 10px 0;" round>后续跟进</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item command="6">
                      <el-button type="danger" size="small" class="d66" style="margin: 10px 0;" round>有资源再联系</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>

            </div>
            <div v-if="this.$route.query.type!=3" class="t_msginfo_box" style="margin-bottom: 25px;">
              <div style="width: 90px;">拨打备注：</div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="remark">
              </el-input>
            </div>
          </div>

        </div>
      </div>
      <div class="t_wh_tab">
        <div class="t_cllc_title">
          <div class="t_call_right_tab" @click="chooseright(1)" :class="righttab==1?'t_call_right_tab_lei':''">
            外呼记录
            <div class="t_right_under_line" :class="righttab==1?'t_right_under_line_lei':''"></div>
          </div>
          <div class="t_call_right_tab" @click="chooseright(2)" :class="righttab==2?'t_call_right_tab_lei':''">
            外呼录音
            <div class="t_right_under_line" :class="righttab==2?'t_right_under_line_lei':''"></div>
          </div>
        </div>
        <div  v-if="righttab==1" class="t_lc_box">
          <div v-for="(item,index) in bzlist" :key="index" class="t_lc_item" >
            <div style="color: #9f9f9f;font-size: 14px;">{{ item.created_at }}</div>
            <div v-if="item.type==3" style="font-size: 14px;"  class="t_speak_red" >{{ item.remark }}</div>
            <div v-else style="color: #333333;font-size: 14px;" v-html="item.remark"  ></div>
          </div>
        </div>
        <el-input v-if="righttab==1" type="textarea" v-model="sendmsg" :rows="8" resize='none' placeholder="请输入留言内容按Ctrl+Enter发送" @keydown.ctrl.enter.native="send()"  ></el-input>
        <!-- 录音列表 -->
        <div v-if="righttab==2" class="t_lu_box" >


          <div class="t_audio_box" v-for="(item,index) in audiolist" :key="index">
              <div class="t_audio_left">
                <div class="t_audio_line_cir"></div>
                <img style="height: 100px;width: 1px;" src="../../../../static/img/audline.png" alt="">
              </div>
              <div>
                <span style="color: #2974FF;margin-right: 50px;margin-bottom: 20px;">{{ item.created_at }}</span>外呼人：{{ item.name }}
                <audio class="t_audio" controls>
                    <source :src="item.record" type="audio/wav">
                </audio>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!this.$route.query.orderid" class="t_change_box">
      <el-button @click="shangyitiao" type="danger" round style="margin-right: 30px;background-color: #2974FF;">上一条</el-button>
      <el-button @click="xiayitiao" type="primary" style="background-color: #18A0FB;" round>下一条</el-button>
    </div>
    <div v-else class="t_change_box">
      <el-button @click="saveorder"  type="danger" round style="margin-right: 30px;background-color: #2974FF;">保存</el-button>
    </div>
    <!-- 转单记录 -->
    <el-dialog
      title="转单记录"
      :visible.sync="isshowzhuan"
      width="1000px">
      <el-table
      :data="zhuanData"
      style="width: 100%">
      <el-table-column
        prop="page_title"
        label="原套餐商品名称">
      </el-table-column>
      <el-table-column
        prop="page_fetch_code"
        label="原套餐商品编码">
      </el-table-column>
      <el-table-column
      	prop="producer"
      	label="供应商"
      	align="center">
      </el-table-column>
      <el-table-column
        prop="to_page_title"
        label="转单套餐商品名称">
      </el-table-column>
      <el-table-column
        prop="to_page_fetch_code"
        label="转单套餐商品编码">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="时间">
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 20px;">
      <el-button @click="closezhuan" type="primary">确认</el-button>
    </div>
    </el-dialog>
    <!-- 物流轨迹 -->
    <el-dialog
      title="物流轨迹"
      :visible.sync="isshowguiji"
      width="600px">
      <el-timeline >
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.AcceptTime">
          {{activity.AcceptStation}}
        </el-timeline-item>
      </el-timeline>
      <div style="text-align: center;margin-top: 20px;">
      <el-button @click="closeguiji" type="primary">确认</el-button>
    </div>
    </el-dialog>
    <xiugaishangpin :id="infoobj.order_id" @xiugaishangpinwan="xiugaishangpinwan" ref="xiugaishangpin"></xiugaishangpin>

    <chuangjiandingdand :all="chuangjiandingdanall" v-if="chuangjiandingdanlog" @chuangjiango="chuangjiango"></chuangjiandingdand>

    <!-- 添加好友 -->
    <el-dialog
      title="添加好友"
      :visible.sync="isshowaddp"
      width="400px">
      <div style="margin-top: -62px;margin-left: 85px;margin-bottom: 40px;">请确保此手机号为用户微信绑定手机号</div>
      <div class="t_phone_box">
        <div style="width: 50px;text-align: right;margin-right: 15px;">手机号</div>
        <el-input v-model.trim="addnum" placeholder="请输入手机号"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="isshowaddp = false">取 消</el-button>
        <el-button type="danger" style="background-color: #2974FF;" round @click="sureadd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="手机设备未连接" :visible.sync="logerror" width="1000px" center :close-on-click-modal="false" :close-on-press-escape="false">
          <div>{{cuowu}}</div>
          <span slot="footer" class="dialog-footer">
          	<el-button type="danger" round @click="logerror = false">确定</el-button>
          </span>
        </el-dialog>
        <el-dialog
      title="订单维系"
      :visible.sync="isshownorest"
      :close-on-click-modal="false"
      width="400px">
      <el-select v-model="novalue" style="width: calc(100% - 100px);" placeholder="请选择">
        <el-option
          v-for="item in norestlist"
          :key="item.id"
          :label="item.reason"
          :value="item.id">
        </el-option>
      </el-select>
      <el-button type="text" @click="isshowsetrest = true" style="margin-left: 20px;" >定义原因</el-button>
      <div style="display: flex;justify-content: center;margin-top: 20px;">
        <el-button style="margin-right: 30px;" @click="isshownorest = false" round>取 消</el-button>
        <el-button type="danger" @click="editrest()" round>确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="定义原因"
      :visible.sync="isshowsetrest"
      :close-on-click-modal="false"
      width="500px">
      <div v-for="(item,index) in norestlist" :key="index" style="display: flex;align-items: center;">
        <div style="width: calc(100% - 50px);">{{ item.reason }}</div>
        <el-button type="text" @click="delrest(item.id)"  >删除</el-button>
      </div>

      <div class="t_norest_box">
        <el-input size="medium" style="width: calc(100% - 100px);" v-model="inrest" maxlength="30" placeholder="请输入拒绝原因，不超过30个字"></el-input>
        <el-button @click="addrest" size="medium">添 加</el-button>
      </div>
      <div style="display: flex;justify-content: center;margin-top: 20px;">
        <el-button style="margin-right: 30px;" @click="isshowsetrest = false" round>取 消</el-button>
        <el-button type="danger" @click="isshowsetrest = false" round>确 定</el-button>
      </div>
    </el-dialog>

    <!-- 短信 -->
    <el-dialog
      title="请选择发送模板"
      :visible.sync="isshowmsglist"
      width="500px"
      :close-on-click-modal="false">
      <div @click="choosemsg(item)" :class="{'t_msg_list_lei':nowchoosemsg.id==item.id}" class="t_msg_list" v-for="(item,index) in this.msglist" :key="index">{{ item.name }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="isshowmsglist = false">取 消</el-button>
        <el-button round type="danger" style="background-color: #2974FF;" @click="faduanxin2">确认发送</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from "axios";

  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";
  import xiugaishangpin from '../zujian/gaishangpin.vue'
  import chuangjiandingdand from '../zujian/chuangjiandingdan2.vue'
  import callbtn from './callbtn.vue'
  import rwtype from "./rwtype.vue"

  export default {
    components: {

      UploadExcelComponent,
      xiugaishangpin,
      chuangjiandingdand,
      callbtn,
      rwtype
    },
    name: 'calldig',
    data() {
      return {

        shebei:{
          device_id:"",
          user:""
        },
        dianxinshebie:"",
        shoujishebie:"",

        flaglist: [],
        flagradio:0,
        sendmsg:'',
        bzlist:[],
        tagList: [],
        changetype:0,
        noworderid:'',
        infoobj:{},
        remark: '',
        isshowzhuan:false,
        zhuanData:[],
        isblack:0,
        isshowguiji:false,
        activities: [],
        weifasong:true,
        chuangjiandingdanlog:false,
        chuangjiandingdanall:"",
        isshowaddp:false,
        addnum:'',
        righttab:1,
        audiolist:[],
        calltype:'',
        nowcall:'',
        ws:"",
        logerror:false,
        hujiaozhuangtai:{
          status_name:"",
          error:""
        },
        openfail:1,
        openhs:2,
        openallorder:2,
        isshownorest:false,
        norestlist: [],
        novalue: '',
        isshowsetrest:false,
        inrest:'',
        nowcom:'',
        iscanadd:true,
        isshowmsglist:false,
        msglist:[],
        nowchoosemsg:{},
        fklist:[],
        fkname:[],
        choosefkobj:{
          is_call_allowed:'',
          is_app_allowed:'',
          is_tel_allowed:'',
          is_yzj_allowed:'',
          pop_up_confirm:'',
          pop_up_message:''
        },
        fktypelist:[],
        fktypealllist:[],
      }
    },
    created() {

      this.getlist()
      this.getsheibei()
      this.getflag()
      this.websocket2()

    },
    methods: {
      allfail(){
        if(this.openfail ==1){
          this.openfail = 2
        }else if(this.openfail ==2){
          this.openfail = 1
        }


      },
      allhs(){
        if(this.openhs ==1){
          this.openhs = 2
        }else if(this.openhs ==2){
          this.openhs = 1
        }


      },
      allorder(){
        if(this.openallorder ==1){
          this.openallorder = 2
        }else if(this.openallorder ==2){
          this.openallorder = 1
        }


      },
      getsheibei(){


          this.dianxinshebie = ''
          this.shoujishebie = ''

          //获取device——id
          axios.get("/api/sys/call/user/device")
                .then(response=>{
            if(response.data.msg.code == 0){
              this.shebei = response.data.data
              if(this.shebei.list && this.shebei.list.length>0){
                this.shebei.list.forEach(item=>{
                  if(item.terminal == 'cloud'){
                    this.dianxinshebie = item.device_id
                  }
                  if(item.terminal == 'mobile'){
                    this.shoujishebie = item.device_id
                  }
                })

              }
            }else{
              this.$message.error(response.data.msg.info);
            }
          })
      },
      websocket2() {
        var that = this
        if(typeof(WebSocket) === "undefined"){
              this.$message.error("您的浏览器不支持socket")
        }else{
            if(location.href.includes('118.190.155.55') || location.href.includes('localhost')){

              this.ws = new WebSocket("ws://118.190.155.55:8995");
            }else{
              this.ws = new WebSocket("wss://ws.91haoka.cn:8995");
            }
            //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
            this.ws.onopen = function(){
            　　//当WebSocket创建成功时，触发onopen事件
                console.log("open");
            }
            this.ws.onmessage = function(e){
                console.log('onmessage')
                console.log(e.data)

            　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
                // JSON.parse(e.data) == 'what'  不知道干啥的回复
                if(JSON.parse(e.data) == 'what' || JSON.parse(e.data).type == '@heart@' || JSON.parse(e.data).status_name == '连接成功'  ){
                  console.log('WebSocket链接成功')
                  that.getsheibei()
                }else{
                  if(JSON.parse(e.data) == 'failed' || JSON.parse(e.data).error){

                    // {"status_name":"拨号中","error":"未连接"}

                    if(JSON.parse(e.data).error == '未连接'){
                      // that.cuowu = JSON.parse(e.data).error
                      that.cuowu = '未检测到您的账号登录手机拨号APP，请先登录手机设备后再拨打'
                      that.getsheibei()
                    }

                    if(JSON.parse(e.data).error == '未获取到本机主叫号码，拨打失败'){
                      // that.cuowu = JSON.parse(e.data).error
                      that.cuowu = '未获取到本机主叫号码，拨打失败'
                      that.getsheibei()
                    }

                    console.log('出错了')
                    that.logerror = true
                    that.nowcall = ''


                  }else{

                    // {"status_name":"呼叫中","error":""}
                    // {"status_name":"已挂断","error":""}

                    if(JSON.parse(e.data).status_name == '已连接'){
                      that.getsheibei()
                    }
                    if(JSON.parse(e.data).status_name == '已挂断'){
                      that.nowcall = ''
                      if(JSON.parse(e.data).message){
                        that.$message.error(JSON.parse(e.data).message);
                      }
                    }
                    // if(JSON.parse(e.data).status_name == '拨打失败'){
                    //   that.nowcall = ''
                    //   if(JSON.parse(e.data).message){
                    //     that.$message.error('未获取到本机主叫号码，拨打失败');
                    //   }
                    // }
                  }
                  console.log('WebSocket链接返回消息')
                  console.log(JSON.parse(e.data))
                  that.hujiaozhuangtai = JSON.parse(e.data)
                }

            }
            this.ws.onclose = function(e){
            　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            　　console.log("close");
                this.ws = ""
            }
            this.ws.onerror = function(e){
                console.log('onerror')
            　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            　　console.log(error);
            }
        }
      },
      getlist(){
        this.weifasong = true
        var nowurl = ''
        var obj = {}

        var msgobj = {}

        if(this.$route.query.orderid){
          //拨打记录过来
          nowurl = '/api/plan-market/call/order/v2'
          obj = {
            order_id:this.$route.query.orderid
          }

          //获取短信模板
          msgobj = {
            task_id:this.$route.query.orderid
          }

        }else if(this.$route.query.renwuid){
          //拨打记录过来
          nowurl = '/api/plan-market/call/detail/info/v2'
          obj = {
            task_order_id:this.$route.query.renwuid
          }

          //获取短信模板
          msgobj = {
            task_id:this.$route.query.renwuid
          }

        }else if(this.$route.query.type==3){
          //营销




          if(this.$route.query.renwuidyx){
            nowurl = '/api/plan-market/call/marketing/detail/info/v2'
            obj = {
              task_order_id:this.$route.query.renwuidyx
            }

            //获取短信模板
            msgobj = {
              task_id:this.$route.query.renwuidyx
            }

          }else{
            nowurl = '/api/plan-market/call/marketing/order_detail/v2'
            obj = {
              task_id:this.$route.query.id,
              type:this.changetype,
              task_order_id:this.noworderid
            }

            //获取短信模板
            msgobj = {
              task_id:this.$route.query.id
            }

          }






        }else if(this.$route.query.tab){
          //任务多条过来
          nowurl = '/api/plan-market/track/call/order/v2'
          obj = {
            type:this.changetype,
            task_order_id:this.noworderid,
            source:this.$route.query.source,
            page_id:this.$route.query.page_id,
            active_status:this.$route.query.active_status,
            tab:this.$route.query.tab,
            start:this.$route.query.start,
            end:this.$route.query.end,
            source_type:this.$route.query.source_type
          }


            //获取短信模板
            msgobj = {
              task_id:this.noworderid
            }

        }else{
          //任务单条过来
          nowurl = '/api/plan-market/call/task/order_detail/v2'
          obj = {
            task_id:this.$route.query.id,
            type:this.changetype,
            task_order_id:this.noworderid,
            source:this.$route.query.source,
            good_sku:this.$route.query.good_sku,
            refund_status:this.$route.query.refund_status,
            start:this.$route.query.start,
            end:this.$route.query.end
          }
          if(this.infoobj.order_id){
            obj['order_type'] = this.infoobj.order_type
          }

          //获取短信模板
          msgobj = {
              task_id:this.$route.query.id
            }
        }


        if(this.$route.query.tab){
          axios.post(nowurl,obj).then(response => {
                if (response.data.msg.code == 0) {
                  console.log('详情')
                  console.log(response.data)
                  this.infoobj = response.data.data
                  this.noworderid = response.data.data.id
                  this.flagradio = response.data.data.flag
                  this.remark = response.data.data.remark

                  //意向标签
                  this.moretagList()
                  //获取备注列表
                  this.getbzlist()
                  //是否是黑名单
                  this.getblack()
                  //获取录音
                  this.getaudio()
                  //风控
                  this.getfktypelist()

                  //置空
                  this.calltype = ''
                  this.nowcall = ''
                }else{
                  this.$message.error(response.data.msg.info);
                }
            })
        }else{
          axios.get(nowurl,{
            params:obj
          }).then(response => {
                if (response.data.msg.code == 0) {
                  console.log('详情')
                  console.log(response.data)
                  this.infoobj = response.data.data
                  this.noworderid = response.data.data.id
                  this.flagradio = response.data.data.flag
                  this.remark = response.data.data.remark

                  //意向标签
                  this.moretagList()
                  //获取备注列表
                  this.getbzlist()
                  //是否是黑名单
                  this.getblack()
                  //获取录音
                  this.getaudio()
                  //风控
                  this.getfktypelist()
                  //置空
                  this.calltype = ''
                  this.nowcall = ''
                }else{
                  this.$message.error(response.data.msg.info);
                }
            })
        }

        //获取短信模板
        axios.get("/api/plan-market/call/task/send/message/v2",{params:msgobj}).then(response => {

          this.msglist = response.data.data;
          console.log('短信模板')
          console.log(this.msglist)
        });



      },
      getflag: function() {
        axios.get("/api/gth/shop/flag/info").then(response => {
          for (var i in response.data.data) {
            if (response.data.data[i].type == 0) {
              response.data.data[i].color = "#e4dfd7";
            }
            if (response.data.data[i].type == 1) {
              response.data.data[i].color = "#ee3f4d";
            }
            if (response.data.data[i].type == 2) {
              response.data.data[i].color = "#ebb10d";
            }
            if (response.data.data[i].type == 3) {
              response.data.data[i].color = "#229453";
            }
            if (response.data.data[i].type == 4) {
              response.data.data[i].color = "#2775b6";
            }
            if (response.data.data[i].type == 5) {
              response.data.data[i].color = "#8076a3";
            }
          }

          this.flaglist = response.data.data;
        });
      },
      send() {
        if(this.sendmsg==''){
          this.$message.error('请输入内容');
        }else{
          var str = this.sendmsg
          str = str.replace(/\n/g,"<br>");
          //添加列表
          this.upbzlist(str)
        }

        console.log("按住ctrl+enter时触发")
      },
      //添加列表
      upbzlist(con){


        axios.post("/api/plan-market/call/order/operate/record/add/v2", {
          tasks_order_id: this.noworderid,
          content: con,
        })
          .then((response)=>{
              if (response.data.msg.code == 0) {
                this.sendmsg = ''
                //获取备注列表
                this.getbzlist()
              }else{
                this.$message.error(response.data.msg.info);
              }
          })
      },
      //获取备注列表
      getbzlist(){
        axios.get("/api/plan-market/call/order/operate/record/list/v2",{
          params:{task_order_id: this.noworderid}
        } )
          .then((response)=>{
              if (response.data.msg.code == 0) {
                console.log('备注列表')
                console.log(response)
                this.bzlist = response.data.data
              }else{
                this.$message.error(response.data.msg.info);
              }
          })
      },
      //是否是黑名单
      getblack(){
        var that = this
        axios.get("/api/plan-market/call/order/black/check/v2",{
          params:{
            order_id:this.noworderid
          }
        })
          .then(function(response) {
              if (response.data.msg.code == 0) {
                console.log('是否是黑名单')
                console.log(response.data.data.is_black)
                that.isblack = response.data.data.is_black
              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      // 修改黑名单
      changeblack(val){
        console.log(val)
        axios.post("/api/plan-market/call/order/black/v2",{
          order_id:this.noworderid
        })
          .then(function(response) {
              if (response.data.msg.code == 0) {

              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      //意向标签
      moretagList(){
        var that = this
        axios.get("/api/plan-market/call/label/list/v2",{
          params:{
            id:this.noworderid
          }
        })
          .then(function(response) {
              if (response.data.msg.code == 0) {
                that.tagList = response.data.data
                console.log('标签列表')
                console.log(that.tagList)
              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      //设置标签
      settagList(id){
        var that = this
        axios.post("/api/plan-market/call/label/edit/v2",{
            tasks_order_id:this.noworderid,
            label_id:id
          }
        )
          .then(function(response) {
              if (response.data.msg.code == 0) {
                  //意向标签
                 that.moretagList()
                 //获取备注列表
                 that.getbzlist()
              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      //开始外呼窗口 意向切换
      wantswitch(item){
        //添加列表
        this.remark += item.name
        this.settagList(item.id)
      },

      shangyitiao(){
        if(this.nowcall==''){
          //标旗备注
          if(this.$route.query.type!=3){
            this.setflagrem()
          }


          this.changetype = 1

          this.getlist()
        }else{
          this.$message.error('请先处理当前任务');
        }


      },
      xiayitiao(){
        // 是否是已经处理过的任务
        console.log(this.infoobj.can_go_next)
     //标旗备注
          if(this.$route.query.type!=3){
            this.setflagrem()
          }
        //临时不限制
        this.changetype = 0
          this.getlist()


        // if(this.infoobj.can_go_next){
        //   //标旗备注
        //   if(this.$route.query.type!=3){
        //     this.setflagrem()
        //   }


        //   this.changetype = 0
        //   this.getlist()
        // }else{
        //   console.log(this.calltype)
        //   console.log(this.nowcall)
        //   if(this.calltype!=''&&this.nowcall==''){
        //     //标旗备注
        //     if(this.$route.query.type!=3){
        //       this.setflagrem()
        //     }
        //     this.changetype = 0
        //     this.getlist()
        //   }else{
        //     this.$message.error('请先处理当前任务');
        //   }
        // }


      },
      // 保存
      saveorder(){
        this.setflagrem(1)
      },
      // 打开转单
      openzhuan(){

        axios.post("/api/plan-market/order/transfer/list",{
            id:this.infoobj.order_id,
          }
        )
          .then((response)=> {

              if (response.data.msg.code == 0) {
                 this.zhuanData = response.data.data
                 this.isshowzhuan = true
              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      closezhuan(){
        this.isshowzhuan = false
      },
      //物流轨迹
      opengj(){

        axios.post("/api/plan-market/shop/track/query",{
          order_id:this.infoobj.order_id,
          }
        )
          .then((response)=> {

              if (response.data.msg.code == 0) {
                 this.activities = response.data.data.Traces

                 console.log(response.data.data)
                 this.isshowguiji = true
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })

      },
      closeguiji(){
        this.isshowguiji = false
      },
      //标旗备注
      setflagrem(type){
        axios.post("/api/plan-market/order/flag/v2",{
          task_order_id:this.noworderid,
          color:this.flagradio,
          remark:this.remark
          }
        )
          .then((response)=> {

              if (response.data.msg.code == 0) {
                  if(type){
                    this.$message.success('保存成功');
                  }
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })

      },
      // 修改商品
      xiugaishangpin:function(){
        this.$refs.xiugaishangpin.fixprolog = true
      },
      xiugaishangpinwan:function(){
        axios.get("/api/plan-market/order/detail?order_id="+this.xiugaishangpinid)
          .then(response => {
              this.infoobj.product_sku = response.data.data.product_sku
              this.infoobj.source_sku = response.data.data.source_sku
          });
      },
      // 发送短信
      faduanxin:function(){
        this.nowchoosemsg = {}
        this.isshowmsglist = true

      },
      faduanxin2:function(){

        if(this.nowchoosemsg.id==''){
          this.$message.error('请选择短信模板');
          return
        }

        axios.post("/api/plan-market/call/sms/send/v2",{
          mobile:this.infoobj.address_mobile,
          task_order_id:this.noworderid,
          message_id:this.nowchoosemsg.id
        })
          .then(response => {
            if (response.data.msg.code == 0) {
                this.$message.success('已发送短信');
                this.weifasong = false
            }else{
                this.faguoduanxinle = true
                this.$message.error(response.data.msg.info);
            }
          });
      },
      // 创建订单
      chuangjiango:function(){
        this.chuangjiandingdanlog = false
      },
      chuangjiandingdan:function(){
        this.chuangjiandingdanall = JSON.parse(JSON.stringify(this.infoobj))
        this.chuangjiandingdanlog = true
        console.log(this.chuangjiandingdanlog)
      },
      //添加好友
      addfriend(){
        this.addnum = JSON.parse(JSON.stringify(this.infoobj.address_mobile))
        this.isshowaddp = true
      },
      sureadd(){
        var that = this
        axios.get("/api/plan-market/call/task/create/friend/v2",{
          params:{
            task_order_id:this.noworderid,
            mobile:this.addnum
          }
        })
          .then((response)=> {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
              }else{
                  that.$message.error(response.data.msg.info);
              }
              this.isshowaddp = false
          })
      },
      //右侧功能切换
      chooseright(val){
        this.righttab = val
      },
      //获取录音
      getaudio(){
        axios.get("/api/plan-market/call/record/list/v2",{
          params:{
            task_order_id:this.noworderid,

          }
        })
          .then((response)=> {
              if (response.data.msg.code == 0) {
                console.log('录音')
                console.log(response.data)
                this.audiolist = response.data.data
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      //  已拨打
      called(val){
        this.calltype = '1'
        this.nowcall = val
        this.hujiaozhuangtai.status_name = ''
        this.hujiaozhuangtai.error = ''

        console.log(val)

      },
      closecall(){
        this.nowcall = ''
      },
      // 监听修改类型
      changerwtype(){
        //意向标签
        this.moretagList()
      },
      handleCommand(command) {
        this.nowcom = command
        if(command==4){
          this.getrest()
          this.isshownorest = true
          this.novalue = ''
        }else{
          this.editrest()
        }



      },
      editrest(){
        if(this.nowcom==4){
          if(!this.novalue){
            this.$message.error('请选择原因');
            return
          }
        }
        axios.post('/api/plan-market/set/order/call/status',{
          order_id:this.infoobj.order_id,
          call_status:this.nowcom,
          reason_id:this.novalue
        }).then(response => {
        		if(response.data.msg.code==0){
              this.isshownorest = false
              this.$message.success('修改成功');
              this.infoobj.call_status = this.nowcom
              // this.getlist()
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
        })
      },
      addrest(){
        if(this.iscanadd){
          this.iscanadd = false
          axios.post('/api/plan-market/call/add/refuse/reason',{
            reason:this.inrest
          }).then(response => {
              this.iscanadd = true
              if(response.data.msg.code==0){
                this.$message.success('添加成功');
                this.getrest()
                this.inrest = ''
              }else{
                this.$message.error(response.data.msg.info);
              }
          })
        }

      },
      getrest(){
        axios.get('/api/plan-market/call/get/refuse/reason').then(response => {
              if(response.data.msg.code==0){
                console.log('失败原因')
                console.log(response.data)
                this.norestlist = response.data.data
              }else{
                this.$message.error(response.data.msg.info);
              }
          })
      },
      delrest(id){
        axios.post('/api/plan-market/call/del/refuse/reason',{
          id:id
        }).then(response => {
        		if(response.data.msg.code==0){
              this.$message.success('删除成功');
              this.getrest()
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
        })
      },
      handleCommand2(command) {
        if(command == 'a'){
          this.infoobj.order_type=0
        }
        if(command == 'b'){
          this.infoobj.order_type=1
        }
      },
      choosemsg(item){
        this.nowchoosemsg = item
      },
      getfktypelist(){
        axios.get('/api/plan-market/call/risk/type/list/v2',{params:{
          mobile:this.infoobj.address_mobile,
          is_kf:1
        }})
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('类型')
              console.log(response.data.data.data)
              this.fktypelist = response.data.data.data





            } else {
              this.$message.error(response.data.msg.info);
            }
          })


        axios.get('/api/plan-market/call/risk/type/list/v2',{params:{
          mobile:this.infoobj.address_mobile,

        }})
          .then((response) => {
            if (response.data.msg.code == 0) {

              this.fktypealllist = response.data.data.data
              this.fkname = []
              var arr = []
              for(var x=0;x<this.fktypealllist.length;x++){
                if(this.fktypealllist[x].check==1){
                  arr.push(this.fktypealllist[x])
                  this.fkname.push(this.fktypealllist[x].risk_type)
                }
              }

              if(arr.length>0){
                //有选中标签
                var arr1 = []
                var arr2 = []
                var arr3 = []
                var arr4 = []
                var arr5 = []
                for(var y=0;y<arr.length;y++){
                  arr1.push(arr[y].is_call_allowed)
                  arr2.push(arr[y].is_app_allowed)
                  arr3.push(arr[y].is_tel_allowed)
                  arr4.push(arr[y].is_yzj_allowed)
                  arr5.push(arr[y].pop_up_confirm)
                  this.choosefkobj.pop_up_message = arr[y].pop_up_message
                }

                this.choosefkobj.is_call_allowed = Math.min(...arr1)
                this.choosefkobj.is_app_allowed = Math.min(...arr2)
                this.choosefkobj.is_tel_allowed = Math.min(...arr3)
                this.choosefkobj.is_yzj_allowed = Math.min(...arr4)
                this.choosefkobj.pop_up_confirm = Math.min(...arr5)


              }else{
                //没有选中标签
                this.choosefkobj = {}
              }

              console.log('类型总')
              console.log(response.data.data.data)
              console.log(this.choosefkobj)



              if(this.choosefkobj.pop_up_message){
                if(this.choosefkobj.pop_up_confirm){
                  //弹窗确认
                  this.$alert(this.choosefkobj.pop_up_message, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                  });
                }else{
                  this.$message({
                    message: this.choosefkobj.pop_up_message,
                    type: 'warning'
                  });
                }
              }



            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      changefk(row){
        axios.post('/api/plan-market/call/risk/mobile/edit/v2',{
          risk_type_id:row.id,
          mobile:this.infoobj.address_mobile,
          order_id:this.noworderid
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.getfktypelist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    },
    beforeDestroy(){

    },


  }
</script>

<style  scoped>

  /deep/ .t_call_window .el-dialog__header{
    padding: 20px ;
  }
  /deep/ .t_call_window .el-dialog__body{
    padding: 0 0 30px 0;
  }
  .t_call_con{
    padding: 30px 20px;
    background-color: white;
    border-bottom: 10px solid rgb(245, 245, 245);
  }
  .t_my_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    height: 64px;
    box-sizing: border-box;
    padding: 30px;
    margin-bottom: 10px;
    background-color: white;
  }
  .t_wh_head{
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #336fff;
    border-radius: 50%;
    margin-right: 15px;
  }
  .t_wh_head img{
    width: 100%;
  }
  .t_wh_top_left{
    display: flex;
    justify-content: space-between;
  }
  .t_head_info{
    display: flex;
    font-size: 12px;
    color: #666666;
    align-items: center;
  }

  .t_name{
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
  }
  .t_lh_font{
    font-size: 14px;
    color: #666666;
  }
  .t_info_box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .t_shu_line{
    width: 1px ;
    height: 10px;
    background-color: #EEEEEE;
    margin-left: 8px;
    margin-right: 8px;
  }
  .t_top_nav{
    padding: 20px 30px 0px 30px;
    box-sizing: border-box;
    background-color: white;
  }
  .t_top_name_box{
    display: flex;
    align-items: center;
  }
  .t_wh_top_right{
    margin-top: 14px;
    display: flex;
    align-items:flex-start
  }
  .t_wh_btn_numall{
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 8px 13px;
    justify-content: space-between;
    margin-right: 10px;
    cursor: pointer;
  }
  .t_wh_btn0{
    border: 1px solid #999999;
    background: #f9f9f9;
    color:#999999 ;
  }
  .t_wh_btn1{
    border: 1px solid #7b67ee;
    background: #f2f0fd;
    color:#7b67ee ;
  }
  .t_wh_btn2{
    border: 1px solid #00b97c;
    background: #e6f8f2;
    color:#00b97c ;
  }
  .t_wh_btn3{
    border: 1px solid #18a0fb;
    background: #e8f6ff;;
    color:#18a0fb ;
  }
  .t_wh_btn_img{
    width: 20px;
    margin-left: 6px;

  }
  .t_wh_btn_all{
    display: flex;
  }
  .t_msginfo_box{
    display: flex;
    align-items:center
  }
  .t_hs_msg{
    max-width: 83%;
    word-break: break-all;
  }
  .t_order_box{
    background-color: #e8f6ff;
    border-radius: 20px;
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  .t_order_box_in{
    display: flex;
    flex-wrap: wrap;
  }
  .t_order_item{
    display: flex;
    font-size: 14px;
    margin-bottom: 20px;
    width: 33.3%;
  }
  .t_order_title{
    color:#333333;
  }
  .t_order_info{
    color: #666666;
  }
  .t_call_tag_title{
    padding: 16px 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
  }
  .t_call_all_tag_box{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
  }
  .t_tag_item{
    border: 1px solid #cccccc;
    border-radius: 5px;
    background: #eeeeee;
    color: #333333;
    padding: 8px 24px;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .t_call_bottom_box{
    padding: 30px;
    box-sizing: border-box;
  }
  .t_wh_tab{
    width: 445px;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    background-color: white;
  }
  .t_call_center{
    display: flex;
    height: calc(100vh - 184px);
  }
  .t_call_center_left{
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 10px;
    height: 100%;
    overflow: auto;
    background-color: white;
  }
  .t_change_box{
    display: flex;
    justify-content: center;
    height: 76px;
    align-items: center;
    box-sizing: border-box;
    border-top: 2px solid #f5f5f5;
    background-color: white;
  }
  .t_cllc_title{
    padding: 16px 20px 0px 20px;
    box-sizing: border-box;
    font-size: 20px;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    font-size: 18px;
  }
  .t_lc_box{
    padding: 20px;
    box-sizing: border-box;
    height: calc(100vh - 420px);
    /* border: 1px solid red; */
    overflow: auto;
  }
  .t_lc_item{
	margin-bottom: 20px;
}
.t_speak_red{
	color: #FF0C0C;
}
.t_zhuan{
  width: 30px;
  height: 30px;
  background-color: #F68C00;
  color: white;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border-radius: 6px;
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
}
.t_phone_box{
  display: flex;
  align-items: center;
}
.t_call_right_tab{
  margin-right: 100px;
  cursor: pointer;
}
.t_call_right_tab_lei{
  color: #F1F8FF;
}
.t_right_under_line{
  width: 30px;
  height: 5px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
  margin-top: 10px;
}
.t_right_under_line_lei{
  background-color: #F1F8FF;
}
.t_lu_box{
  box-sizing: border-box;
  overflow: auto;
  height: calc(100vh - 240px);
  padding: 20px;
}
.t_audio_box{
  display: flex;
}
.t_audio_line_cir{
  border: 3px solid #F1F8FF;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.t_audio_left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  padding-top: 2px;
}
.t_audio{
  margin-top: 20px;
  width: 100%;
}
.t_one_col{
  height: 20px;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 文本溢出显示省略号 */

}
.t_norest_box{
  margin-top: 20px;
  margin-bottom: 20px;
}
/deep/.t_norest_box .el-input__inner{
  width: 100% !important;
}
.t_call_order{
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-right: 30px;
}
.t_msg_list{
  padding: 22px;
  background-color: #F3F5F8;
  border:2px solid #F3F5F8;
  border-radius: 8px;
  margin-bottom: 15px;
  cursor: pointer;
}
.t_msg_list_lei{
  background-color: #E4EFFF;
  border:2px solid #104AFF;
  color:#104AFF
}
</style>
